<template>
  <div>
    <div class="header">
      <div class="left">
        <img class="img" :src="$baseUrl+device.imgUrl.split(',')[0]" alt="" />
      </div>
      <div class="right">
        <div class="name">{{  device.deviceName }}</div>
        <div class="des"><span>编号:</span> {{ deviceId }}
          <el-tag class="margin-left-10" :type="deviceStatus.color" size="mini">{{deviceStatus.title}}
          </el-tag>
          <span>&nbsp地块:</span> {{ device.landName }}
        </div>
      </div>
    </div>
    <div class="body">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label=" 采集数据" name="p1">
          <div class="content-box">
            <div class="content" :class="{'grey':grey,'padding0':noPadding}" >
              <slot name="p1" :device="device">
                <w-q-detail class="margin-top-20" :device="device" ></w-q-detail>
              </slot>
            </div>
          </div>
        </el-tab-pane>
<!--        <el-tab-pane label="定时任务" name="p2">-->
<!--          <div class="content-box">-->
<!--            <div class="content">-->
<!--              <slot name="p2">-->
<!--                <device-timer class="margin-top-20" :device="device" ></device-timer>-->
<!--              </slot>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="设备日志" name="p4">-->
<!--          <div class="content-box">-->
<!--            <div class="content">-->
<!--              <slot name="p4">-->
<!--                <device-log class="margin-top-20" :device="device"></device-log>-->
<!--              </slot>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="数据分析" name="p5">-->
<!--          <div class="content-box">-->
<!--            <div class="content">-->
<!--              <slot name="p5">-->
<!--                <device-statistic-->
<!--                  :chart-visible="chartVisible"-->
<!--                  class="margin-top-20"-->
<!--                  :device="device"-->
<!--                ></device-statistic>-->
<!--              </slot>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-tab-pane>-->
        <slot name="tabs">
        </slot>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  //数据组件
  import WQDetail from "@/views/iot/device/components/WaterQuality/WQDetail.vue";
  import DeviceForm from '@/views/iot/device/device-form.vue';
  import DeviceTimer from '@/views/iot/device/device-timer.vue';
  import DeviceLog from '@/views/iot/device/components/WaterQuality/device-log.vue';
  import DeviceStatistic from '@/views/iot/device/device-statistic.vue';
  import { getDevice } from '@/api/iot/device';
  import { getDeviceRunningStatus } from '@/api/iot/device';
  export default {
    name: 'DeviceView',
    components: {WQDetail,DeviceTimer,DeviceLog,DeviceStatistic},
    props:{
      deviceId:[Number,String],
      grey:{
        type:Boolean,
        default:false
      },
      noPadding:false
    },
    data() {
      return {
        device: {
          imgUrl:'',
          landName:'',
          deviceName:'',
          status:'',
          deviceId: ''
        },
        activeName: 'p1',
        chartVisible: false,
      };
    },
    computed:{
      deviceStatus() {
        const {device} = this;
        if (device.status == 3) {
          return{
            title:'在线模式',
            color:'primary'
          }
        }
        if (device.isShadow == 4) {
            return{
              title:'设备离线',
              color:'danger'
            }
          }else {
          return{
            title:'未激活',
            color:'warning'
          }
        }
        }
      },

    created() {
      this.deviceId && this.getDevice();
    },
    methods: {
      handleTabClick(e) {
        if (e.paneName == 'p5') {
          this.chartVisible = true;
        }
      },
      // /**获取设备信息*/
      async getDevice() {
        const { deviceId } = this;
        getDevice(deviceId).then(async (response) => {
          response.data=await getDevice(deviceId);
          this.device.deviceName=response.data.data.deviceName;
          this.device.status=response.data.data.status;
          this.device.landName=response.data.data.landName;
          this.device.deviceId =deviceId;
        });
      },

      /**获取设备运行状态*/
      getDeviceStatus(deviceId) {
        return new Promise((resolve, reject) => {
          getDeviceRunningStatus(deviceId)
            .then((response) => {
              resolve(response.data.thingsModels);
            })
            .catch((error) => {
              reject(error);
            });
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .header {
    display: flex;
    padding: 15px;
    .left {
      .img {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        margin-right: 10px;
        vertical-align: bottom;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .name {
        font-size: 15px;
      }
      .des {
        font-size: 13px;
        color: #7c7c7c;
      }
    }
  }
  .body {
    .content-box {
      background: #f0f0f0;
      height: calc(100vh - 120px - 84px);
      padding: 0 15px;
      overflow: hidden;
      display: flex;
      align-items: center;
      .content {
        height: calc(100vh - 120px - 84px - 30px);
        background: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        flex: 1;
        padding: 0 20px;
        overflow: auto;
        &.grey{
          background: #f0f0f0 !important;
        }
        &.padding0{
          padding:0 !important;
        }
      }

    }
  }
  ::v-deep {
    .el-tabs__header {
      margin-bottom: 0;
    }
    .el-tabs__header {
      margin-left: 15px;
    }
  }

</style>
